<script setup lang="ts">

import router from "@/router";
import {getConsultID} from "@/api/home/index";
import {useRouter} from "vue-router";
import {ref} from "vue";

const id = useRouter()
let deliverId = id.currentRoute.value.query.id
'501164528269135872'
getConsultID(deliverId).then(res => {
    console.log(res)
    console.log(deliverId)
})

let value = ref('')

const dialogVisible = ref(false)
let textarea = ref('')
let displayText = ref(false)
function submitBtn() {
    dialogVisible.value = false
    displayText.value = true
    localStorage.setItem('textarea', textarea.value)
}

</script>

<template>
  <!--咨询详情-->
    <div class="box">
        <div class="titBoxImg">
            <img src="@/assets/images/线下咨询.png" alt="" class="titImg">
        </div>
        <div class="substance" style="min-height: 66vh;">
            <div class="titTime" @click="router.go(-1)">
                <van-icon name="arrow-left"/>
                <span class="titleText">咨询详情</span>
            </div>
            <div class="consultation">
                <div class="nameBox">
                    <div class="name">
                        郑老师
                    </div>
                    <div class="number">
                        800人咨询过
                    </div>
                </div>
                <div class="timeBox">
                    <div class="timeAndate">
                        <span class="titText">咨询时间</span>
                        <div class="tangibleTime">
                            <div class="date">
                                2022-12-23
                                <span class="day">星期三</span>
                            </div>
                            <div class="time">
                                09:00-10:00
                                <span class="minute">(60分钟)</span>
                            </div>
                        </div>
                    </div>
                    <div class="imgBox">
                        <img src="@/assets/images/个人.png" alt="" class="imgZ">
                        <span>个人咨询</span>
                    </div>
                </div>
                <div class="method">

                    <div class="text">
                        <span class="titText">咨询地址</span>
                        <span class="methodText">线下咨询</span>
                    </div>
                    <div class="state">
                        <!--                        {{item.psyTeacher.status == '0' ? '未开始' : item.psyTeacher.status == '1' ? '进行中' : '已结束'}}-->
                        已结束
                    </div>
                </div>
                <div class="address">
                    <span class="titText">咨询地址</span>
                    <span class="addressText">办公楼316</span>
                </div>
                <div class="consultationSubstance">
                    <div class="imgBox">
                        <img src="@/assets/images/对话咨询.png" alt="" class="imgFigure">
                        <span>咨询内容</span>
                    </div>
                    <div class="text">
                        咨询内容咨询内容咨询内容咨询内容咨询内容咨询内容咨询内容咨询内容
                    </div>
                </div>
                <div class="suggestion">
                    <div class="imgBox">
                        <img src="@/assets/images/对话咨询.png" alt="" class="imgFigure">
                        <span>老师建议</span>
                    </div>
                    <div class="text">
                        老师建议老师建议老师建议老师建议老师建议老师建议老师建议老师建议老师建议
                    </div>
                </div>
                <div v-if="textarea != '' && displayText" class="suggestionOn">
                    <div class="imgBox">
                        <div class="imgText">
                            <img src="@/assets/images/对话咨询.png" alt="" class="imgFigure">
                            <span>咨询反馈</span>
                        </div>
                        <img src="@/assets/images/修改.png" alt="" @click="dialogVisible = true">
                    </div>
                    <div class="text">
                        <div class="fraction">
                            {{['一般', '还好', '不错', '满意', '非常满意'][value - 1]}}
                        </div>
                        {{ textarea }}
                    </div>
                </div>
                <div class="feedbackBtn" v-else>
                    <el-button type="primary" plain class="btn" @click="dialogVisible = true">添加反馈</el-button>
                </div>
            </div>
        </div>
        <el-dialog
                v-model="dialogVisible"
                title="添加反馈信息"
                width="90%"
        >
            <div class="score">
                <div class="text">满意度</div>
                <el-rate
                        v-model="value"
                        :texts="['一般', '还好', '不错', '满意', '非常满意']"
                        show-text
                        style="margin-left: 3%;"
                />
            </div>
            <el-input
                    v-model="textarea"
                    maxlength="30"
                    style="width: 80%"
                    placeholder="请您提出宝贵的建议"
                    show-word-limit
                    type="textarea"
            />
            <template #footer>
                <div class="dialog-footer" style="margin-left: 5%; width: 60%">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitBtn">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}

.box {
    width: 100%;
    min-height: 210vw
}

.substance {
    position: relative;
    margin: -10% auto;
    padding: 6% 6%;
    width: 92%;
    background-color: #f3f4f5;
    border-radius: 15px;

    .consultation {
        .nameBox {
            padding-bottom: 3%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(42, 43, 65, 0.1);

            .name {
                font-weight: 600;
                font-size: 4vw;
            }

            .number {
                color: #8c939d;
            }
        }

        .timeBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2%;
            padding-bottom: 3%;
            border-bottom: 1px solid rgba(42, 43, 65, 0.1);

            .timeAndate {
                min-width: 40vw;
            }

            .tangibleTime {
                margin-top: 2%;

                .day,
                .time {
                    font-size: 4vw;
                    font-weight: 600;
                }

                .time {
                    margin-top: 1%;

                    .minute {
                        margin-left: 3%;
                        font-size: 3vw;
                        color: #8c939d;
                    }
                }
            }

            .imgBox {
                .imgZ {
                    width: 25%;
                    height: 25%;
                    vertical-align: bottom;
                }
            }
        }

        .method {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2%;
            padding-bottom: 3%;
            border-bottom: 1px solid rgba(42, 43, 65, 0.1);

            .text {
                display: flex;
                flex-direction: column;

                .methodText {
                    margin-top: 10%;
                }
            }
        }

        .address {
            display: flex;
            flex-direction: column;
            margin-top: 2%;
            padding-bottom: 3%;
            border-bottom: 1px solid rgba(42, 43, 65, 0.1);

            .addressText {
                margin-top: 3%;
            }
        }

        .consultationSubstance,
        .suggestion {
            margin: 3% auto;
            padding-bottom: 3%;
            border-bottom: 1px solid rgba(42, 43, 65, 0.1);

            .imgBox {
                margin-bottom: 2%;
                width: 100%;
                height: 100%;

                .imgFigure {
                    margin-right: 2%;
                    width: 6%;
                    height: 6%;
                }
            }

            .text {
                margin: auto;
                width: 95%;
            }
        }

        .titText {
            font-size: 3vw;
            color: #8c939d;
        }
    }

    .feedbackBtn {
        margin: 10% auto;
        width: 80%;

        .btn {
            width: 100%;
            height: 100%;
        }
    }
}

.titBoxImg {
    width: 100%;
    height: 100%;

    .titImg {
        width: 100%;
        height: 100%;
    }
}

.titTime {
    margin-bottom: 5%;
    font-size: 5vw;
}

.state {
    padding-top: 1.5%;
    width: 25%;
    min-height: 6vw;
    text-align: center;
    font-size: 90%;
    color: #fff;
    background-color: #419CFD;
    border-bottom-left-radius: 15px;
    border-top-left-radius: 15px;
}

.score {
    display: flex;
    align-items: center;

    .text {
        min-width: 11vw;
    }
}

>>> .el-dialog__body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

>>> .el-rate__text {
    min-width: 20vw;
}

.suggestionOn {
    margin: 3% auto;
    padding-bottom: 3%;
    border-bottom: 1px solid rgba(42, 43, 65, 0.1);

    .imgBox {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2%;
        width: 100%;
        height: 100%;

        .imgFigure {
            margin-right: 6%;
            width: 20%;
            height: 60%;
        }


    }

    .text {
        margin: auto;
        width: 95%;
    }
}
</style>